<template>
  <div id="main"></div>
</template>
<script setup>
import echarts from 'echarts'
const props = defineProps({
  num:{
    type: Number,
  }
})
const { num } = toRefs(props)

onMounted(()=>{
  watch(()=>props.num,()=>{
    let myChart = echarts.init(document.getElementById("main"));
        let option = {
          tooltip: {
            trigger: "item",
          },
          legend: {
              bottom: "5%",
            left: "center",
            // doesn't perfectly work with our tricks, disable it
            selectedMode: false,
          },
          color:['pink'],
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["50%", "60%"],
              center: ["50%", "60%"],
              // adjust the start angle
              startAngle: 230,
              label: {
                show: false,
                formatter(param) {
                  return param.name + " (" + param.percent * 2 + "%)";
                },
              },
              itemStyle: {
                  normal: {
                      color: (list) => {
                        // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                        var colorList = [
                          {
                              colorStart:'#66FFFF',
                              colorEnd:'#1B7CFF'                     
                          },
                          {
                              colorStart:'#26CEBA',
                              colorEnd:'#8efaed'
                          },
                          {
                              colorStart:'#FFC069',
                              colorEnd:'#fadfba'
                          },
                          {
                              colorStart:' #FD6865',
                              colorEnd:'#f8b2b1'
                          }
                        ]
                        return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
                            offset: 0,
                            color: colorList[list.dataIndex]['colorStart']
                        }, {
                            offset: 1,
                            color: colorList[list.dataIndex]['colorEnd']
                        }])                                    
                      }
                  }
              },
              data: [
                { value: num.value, name: "" },
                {
                  // make an record to fill the bottom 50%
                  value: num.value,
                  itemStyle: {
                    // stop the chart from rendering this piece
                    color: "none",
                    decal: {
                      symbol: "none",
                    },
                  },
                  label: {
                    show: false,
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option);
  }, { deep: true, immediate: true })
})
// export default {
//   mounted() {
//     this.chartFun();
//   },
//   methods: {
//     chartFun() {
//       let myChart = echarts.init(document.getElementById("main"));
//       let option = {
//         tooltip: {
//           trigger: "item",
//         },
//         legend: {
//             bottom: "5%",
//           left: "center",
//           // doesn't perfectly work with our tricks, disable it
//           selectedMode: false,
//         },
//         color:['pink'],
//         series: [
//           {
//             name: "Access From",
//             type: "pie",
//             radius: ["50%", "60%"],
//             center: ["50%", "60%"],
//             // adjust the start angle
//             startAngle: 230,
//             label: {
//               show: false,
//               formatter(param) {
//                 // correct the percentage
//                 return param.name + " (" + param.percent * 2 + "%)";
//               },
//             },
//             itemStyle: {
//                 normal: {
//                     color: (list) => {

//                       // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
//                       var colorList = [
//                         {
//                             colorStart:'#66FFFF',
//                             colorEnd:'#1B7CFF'                     
//                         },
//                         {
//                             colorStart:'#26CEBA',
//                             colorEnd:'#8efaed'
//                         },
//                         {
//                             colorStart:'#FFC069',
//                             colorEnd:'#fadfba'
//                         },
//                         {
//                             colorStart:' #FD6865',
//                             colorEnd:'#f8b2b1'
//                         }
//                       ]
//                       return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
//                           offset: 0,
//                           color: colorList[list.dataIndex]['colorStart']
//                       }, {
//                           offset: 1,
//                           color: colorList[list.dataIndex]['colorEnd']
//                       }])                                    
//                     }
//                 }
//             },
//             data: [
//               { value: 123, name: "" },
//               {
//                 // make an record to fill the bottom 50%
//                 value: 123,
//                 itemStyle: {
//                   // stop the chart from rendering this piece
//                   color: "none",
//                   decal: {
//                     symbol: "none",
//                   },
//                 },
//                 label: {
//                   show: false,
//                 },
//               },
//             ],
//           },
//         ],
//       };
//       myChart.setOption(option);
//     },
//   },
// };
</script>

<style lang="scss" scoped>
#main {
  width: 120px;
  height: 120px;
  margin-left: 10px;
}
</style>
